<template>
	<view>
		<!-- #ifndef APP-PLUS -->
		 <view class="wx-top-button" >
			 <view class="iconfont icon-2fanhui" @tap="toBack"></view>
			 <view class="iconfont icon-shouye" @tap="toHome"></view>
		 </view>
		<!-- #endif -->
		<!-- 商品大图 -->
		<swiper-image :imageList="imageList"></swiper-image>
		<!-- 基础详情 -->
		<goods-base-detail></goods-base-detail>
		<!-- 规格X轴 scroll -->
		<linex></linex>
		<spec-attr-scroll></spec-attr-scroll>
		<linex></linex>
		<!-- 属性 -->
		<service-attr :paySku="paySku" :payNum="payNum" :address="address" @popuPopuAttrPrice="popuPopuAttrPrice"></service-attr>
		<!-- 评论 -->
		<comment></comment>
		<!-- 商品详情图 -->
		<linex></linex>
		<image v-for="(image,index) in goodsInfoImageList" :key="index" :src="image" mode=""></image>
		<view class="flex justify-content flex-align-items text-color-h margin-y-20"> —————— 到底了 ——————</view>
		<!-- 底部固定定位 -->
		<bottom-btn @popuPopuAttrPrice="popuPopuAttrPrice"></bottom-btn>
		<!-- 规格属性弹出框 -->
		<popu-attr-price ref="SKU" @submitBtn="submitBtn" @selectSkuChange="selectSkuChange" :goods="goods"></popu-attr-price>
		
	</view>
</template>
<script>
import swiperImage from '../../componets/swiper-images.vue';
import goodsBaseDetail from "../../componets/goods-detail/goods-base-info.vue"
import specAttrScroll from "../../componets/goods-detail/spec-attr-scroll.vue"
import serviceAttr from "../../componets/goods-detail/service-attr.vue"
import comment from "../../componets/goods-detail/comment.vue"
import bottomBtn from "../../componets/goods-detail/bottom-btn.vue"
import popuAttrPrice from "../../componets/goods-detail/popu-atrr-price.vue"
import {mapGetters,mapMutations   } from "vuex"
// 符文本的内容
	var htmlString = `
	<p>
		<img src="https://i8.mifile.cn/v1/a1/9c3e29dc-151f-75cb-b0a5-c423a5d13926.webp">
		<img src="https://i8.mifile.cn/v1/a1/f442b971-379f-5030-68aa-3b0accb8c2b9.webp">
		<img src="https://i8.mifile.cn/v1/a1/63b700b6-643e-ec18-fdf3-da66b4b4173f.webp">
		<img src="https://i8.mifile.cn/v1/a1/e9dbf276-193e-11c4-99a6-3097fde82350.webp">
		<img src="https://i8.mifile.cn/v1/a1/1249d3ee-2990-a2b4-28d9-f719c2417b1f.webp">
		<img src="https://i8.mifile.cn/v1/a1/97c79915-64b2-808c-53b4-4345652a179f.webp">
		<img src="https://i8.mifile.cn/v1/a1/cd0fbe1e-a1b3-a87a-f4a6-6fb08ec54931.webp">
	</p>
	    `
export default {
	components: {
		swiperImage,
		goodsBaseDetail,
		specAttrScroll,
		serviceAttr,
		comment,
		bottomBtn,
		popuAttrPrice
	},
	data() {
		return {
			paySku:{},//已经选择的sku数据
			payNum:0,
			type:0,//1表示加入购物车  2表示立即购买 
			address:{},//收获地址
			imageList: [
				{ src: 'https://i8.mifile.cn/v1/a1/6d13e060-d5c5-e610-88d0-80816fa2b0ce.webp' },
				{ src: 'https://i8.mifile.cn/v1/a1/aff0b715-e63a-68f3-91b0-46a22543555e.webp' }
			],
			goodsInfoImageList:[
				"https://i8.mifile.cn/v1/a1/9c3e29dc-151f-75cb-b0a5-c423a5d13926.webp",
				"https://i8.mifile.cn/v1/a1/63b700b6-643e-ec18-fdf3-da66b4b4173f.webp",
				"https://i8.mifile.cn/v1/a1/e9dbf276-193e-11c4-99a6-3097fde82350.webp",
				"https://i8.mifile.cn/v1/a1/1249d3ee-2990-a2b4-28d9-f719c2417b1f.webp",
				"https://i8.mifile.cn/v1/a1/97c79915-64b2-808c-53b4-4345652a179f.webp",
				"https://i8.mifile.cn/v1/a1/cd0fbe1e-a1b3-a87a-f4a6-6fb08ec54931.webp"
			],
			goods: {
				spuRes: {
					id: null,
					linePrice: 1,
					totalStock: null,
					title: '小米手机',
					description: null,
					type: 1,
					stock:1000,
					defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447979813.jpg',
					price:"2~300",
					baseAttrItems: null,
					skuAttrItems: [{
							attrVal: [{val:'幻夜黑'}, {val:'深空蓝'}, {val:'珍珠白'}],
							attrName: '颜色'
						},
						{
							attrVal: [{val:'36G'}, {val:'360G'}, {val:'128G'}],
							attrName: '尺寸'
						},
						{
							attrVal: [{val:'8寸'}, {val:'16寸'}, {val:'20寸'}],
							attrName: '内存'
						}
					],
					detailPics: ['https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447501121.jpg'],
					shopItemInfo: null,
					carouselImg: ['https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447502779.jpg'],
					identifying: null,
					serviceList: [{
						name: '7天无理由退款',
						describes: '7天无理由退款',
						imgUrl: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1597037158527.jpg'
					}]
				},
				skuRes: [{
						skuId: '1327971433577201665',
						skuName: '幻夜黑  36G  16寸 111',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 1,
						activityPrice: null,
						stock: 0,    //注意注意注意注意注意注意注意<<<<<<<<<<<<<<<库存是0  所以这个没有36G
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447976565.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '幻夜黑',
							'尺寸': '36G',
							'内存': '16寸'
						}
					},
					{
						skuId: '1327971433606561794',
						skuName: '幻夜黑  360G  16寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 2,
						activityPrice: null,
						stock: 2,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447979813.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '幻夜黑',
							'尺寸': '360G',
							'内存': '16寸'
						}
					},
					{
						skuId: '1327971433656893441',
						skuName: '幻夜黑  360G  20寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 3,
						activityPrice: null,
						stock: 3,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447987108.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '幻夜黑',
							'尺寸': '360G',
							'内存': '20寸'
						}
					},
					{
						skuId: '1327971433703030785',
						skuName: '幻夜黑  128G  16寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 4,
						activityPrice: null,
						stock: 4,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447990098.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '幻夜黑',
							'尺寸': '128G',
							'内存': '16寸'
						}
					},
					{
						skuId: '1327971433732390914',
						skuName: '幻夜黑  128G  20寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 5,
						activityPrice: null,
						stock: 5,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447992731.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '幻夜黑',
							'尺寸': '128G',
							'内存': '20寸'
						}
					},
					{
						skuId: '1327971433761751042',
						skuName: '深空蓝  36G  8寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 6,
						activityPrice: null,
						stock: 6,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447995070.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '深空蓝',
							'尺寸': '36G',
							'内存': '8寸'
						}
					},
					{
						skuId: '1327971433786916865',
						skuName: '深空蓝  36G  20寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 7,
						activityPrice: null,
						stock: 7,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447997519.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '深空蓝',
							'尺寸': '36G',
							'内存': '20寸'
						}
					},
					{
						skuId: '1327971433812082689',
						skuName: '深空蓝  128G  8寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 8,
						activityPrice: null,
						stock: 8,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605448001123.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '深空蓝',
							'尺寸': '128G',
							'内存': '8寸'
						}
					},
					{
						skuId: '1327971433837248514',
						skuName: '深空蓝  128G  16寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 9,
						activityPrice: null,
						stock: 9,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605448005062.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '深空蓝',
							'尺寸': '128G',
							'内存': '16寸'
						}
					},
					{
						skuId: '1327971433862414338',
						skuName: '深空蓝  128G  20寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 10,
						activityPrice: null,
						stock: 10,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605448009671.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '深空蓝',
							'尺寸': '128G',
							'内存': '20寸'
						}
					},
					{
						skuId: '1327971433891774465',
						skuName: '珍珠白  36G  8寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 11,
						activityPrice: null,
						stock: 11,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605448012455.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '珍珠白',
							'尺寸': '36G',
							'内存': '8寸'
						}
					},
					{
						skuId: '1327971433916940289',
						skuName: '珍珠白  36G  16寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 12,
						activityPrice: null,
						stock: 12,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605448015891.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '珍珠白',
							'尺寸': '36G',
							'内存': '16寸'
						}
					},
					{
						skuId: '1327971433946300417',
						skuName: '珍珠白  36G  20寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 13,
						activityPrice: null,
						stock: 13,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605448018917.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '珍珠白',
							'尺寸': '36G',
							'内存': '20寸'
						}
					},
					{
						skuId: '1327971433975660546',
						skuName: '珍珠白  360G  8寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 14,
						activityPrice: null,
						stock: 14,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605448024447.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '珍珠白',
							'尺寸': '360G',
							'内存': '8寸'
						}
					},
					{
						skuId: '1327971434005020674',
						skuName: '珍珠白  360G  16寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 15,
						activityPrice: null,
						stock: 15,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605448028957.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '珍珠白',
							'尺寸': '360G',
							'内存': '16寸'
						}
					},
					{
						skuId: '1327971434030186498',
						skuName: '珍珠白  360G  20寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 16,
						activityPrice: null,
						stock: 16,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605448034152.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '珍珠白',
							'尺寸': '360G',
							'内存': '20寸'
						}
					},
					{
						skuId: '1327971434059546626',
						skuName: '珍珠白  128G  8寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 17,
						activityPrice: null,
						stock: 17,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605448039740.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '珍珠白',
							'尺寸': '128G',
							'内存': '8寸'
						}
					},
					{
						skuId: '1327971434084712450',
						skuName: '珍珠白  128G  16寸',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 18,
						activityPrice: null,
						stock: 18,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605448042785.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '珍珠白',
							'尺寸': '128G',
							'内存': '16寸'
						}
					},
					{
						skuId: '1327971434109878273',
						skuName: '珍珠白  128G  20寸 last',
						merchantNo: 448337917371494403,
						spuId: '1327971433522675714',
						price: 19,
						activityPrice: null,
						stock: 0,
						defaultImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605448047547.jpg',
						saleCount: 0,
						type: 1,
						skuAttrItems: {
							'颜色': '珍珠白',
							'尺寸': '128G',
							'内存': '20寸'
						}
					}
				],
				enshrineFlg: false
			}
		};
	},
	onLoad(option) {
		console.log(option);
		this.address=JSON.parse(option.param);
	},
	methods: {
		...mapMutations({
			saveCart:"saveCart"
		}),
		// 弹出价格属性
		popuPopuAttrPrice(type){
			this.type=type
			this.$refs.SKU.open()
		},
		//选择的sku发生变化
		selectSkuChange(sku,num){
			this.paySku=sku;
			this.payNum=parseInt(num);
		},
		// 点击popu弹框中的确定
		submitBtn(){
			let item={
				skuId:this.paySku.skuId,
				skuName:this.paySku.skuName,
				spuId:this.paySku.spuId,
				price:this.paySku.price,
				stock:this.paySku.stock,
				defaultImage:this.paySku.defaultImage,
				skuAttrItems:this.paySku.skuAttrItems,
				payNum:this.payNum,
				checked:false
			}
			if(this.type==1){
				this.saveCart(item);
			}else{
				uni.navigateTo({
					url:"../order-pay/order-pay?goods="+JSON.stringify([item])
				})
			}
		},
		//#ifndef APP-PLUS
		toBack(){
			uni.navigateBack({
				delta:1
			})
		},
		toHome(){
			// 跳转到tabBar页面，只能用switchTab
			uni.switchTab ({
				url:"../index/index"
			})
		}
		//#endif
		
	}
};
</script>

<style lang="less">
	 // #ifndef APP-PLUS
		.wx-top-button{
			display: flex;
			position: fixed;
			top: 50rpx;
			left: 0rpx;
			z-index: 999;
			.iconfont{
				width: 60rpx;
				height: 60rpx;
				margin: 0 10rpx;
				background-color: #999999;
				border-radius: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				font-weight: 600;
				
			}
		}
	//#endif
	
</style>
